import { useEffect, useRef, useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const preRef = useRef(null);

  let preCode = `This is vqqqqq0.
  This is v  ddd d d0.
  This is v ccc dff ff 0.
  This is v2
  This is  v3
  This is v4
  This is    v5`;

  useEffect(()=>{
    console.warn(preRef.current);
    setHighlight();
  }, [preRef]);

  function setHighlight() {
    let parentNode = preRef.current.firstChild;
    console.warn(`parentNode,`, parentNode);

    {
      let range1 = new Range();
      range1.setStart(parentNode, 1);
      range1.setEnd(parentNode, 5);

      let range2 = new Range();
      range2.setStart(parentNode, 10);
      range2.setEnd(parentNode, 15);

      let highlight = new Highlight(range1, range2);

      CSS.highlights.set('my-highlight1', highlight);
    }

    // ---

    {
      let range1 = new Range();
      range1.setStart(parentNode, 21);
      range1.setEnd(parentNode, 25);

      let range2 = new Range();
      range2.setStart(parentNode, 30);
      range2.setEnd(parentNode, 35);

      let highlight = new Highlight(range1, range2);

      CSS.highlights.set('my-highlight2', highlight);
    }

  }

  return (
    <>
      <div className="pulsate"></div>
      <textarea ref={preRef}>
        {preCode}
      </textarea>
    </>
  )
}

export default App
